<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审阅管理</title>
    <!-- 图标组件库 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3701801_12u2357o4ba.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/approval.css">
    <script>

        window.onload = function() {
            var bookList = document.getElementById("bookList");

            var agreeResult = bookList.getAttribute("agreeResult");

            var deleteResult = bookList.getAttribute("deleteResult");

            var result = bookList.getAttribute("result");

            if(agreeResult!=null){
                if(agreeResult=="true"){
                    alert("已同意借阅！");
                }else{
                    alert("借阅失败！");
                }
            }

            if(deleteResult!=null){
                if(deleteResult=="true"){
                    alert("删除成功！");
                }else{
                    alert("删除失败！");
                }
            }

            if(result!=null){
                if(result=="true"){
                    alert("借阅成功！");
                }else{
                    alert("您同意该申请，请勿重复提交！");
                }
            }
        }

    </script>
</head>
<body>


    
 
    <nav class="sidebar close">
        <header>
            <div class="user-info">
                <span class="image">
                    <img src="../img/tx.JPG" alt="">
                </span>
                <div class="text nickname">
                    <span class="name">[[${session.name}]]</span>
                    <span class="identity" th:text="${session.identity}">图书管理员</span>
                </div>
            </div>

            <i class="toggle iconfont icon-xiangyou1"></i>
        </header>

        <div class="menu-bar">
            <div class="menu">
                <li class="search-box">
                    <i class="iconfont icon-sousuo icon"></i>
                    <input type="text" placeholder="搜你想要">
                </li>
                <ul class="menu-links">
                    <li class="nav-link">
                        <a th:href="@{/admin/home}">
                            <i class="iconfont icon-home icon"></i>
                            <span class="text nav-text">回到主页</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/userManage}">
                            <i class="iconfont icon-yonghuguanli icon"></i>
                            <span class="text nav-text">用户管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/bookManage}">
                            <i class="icon iconfont icon-tubiaozhizuomoban-37"></i>
                            <span class="text nav-text">图书管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/problemManage}">
                            <i class="icon iconfont icon-guizeguanli"></i>
                            <span class="text nav-text">反馈管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/approval}">
                            <i class="icon iconfont icon-shenpijieyue"></i>
                            <span class="text nav-text">审批借阅</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/adminManage}">
                            <i class="iconfont icon icon-guanliyuan"></i>
                            <span class="text nav-text">管理员管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a href="#">
                            <i class=" icon iconfont icon-aixin1"></i>
                            <span class="text nav-text">特别关心</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/music}">
                            <i class="icon iconfont icon-yinle"></i>
                            <span class="text nav-text">音乐</span>
                        </a>
                    </li>

                </ul>
            </div>

            <div class="bottom-content">
                <li>
                    <a th:href="@{/logout}">
                        <i class="icon iconfont icon-tuichu"></i>
                        <span class="text nav-text">退出登录</span>
                    </a>
                </li>
                <li class="mode">
                    <div class="sun-moon">
                        <i class="icon iconfont icon-a-icon_wananyueliangshuimian moon"></i>
                        <i class="icon iconfont icon-taiyang-copy sun"></i>
                    </div>
                    <span class="mode-text text">夜间模式</span>
                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
            </div>
        </div>
    </nav>

    <section class="home">
        <div class="operation">
            <ul>
                <li class="searchBox">
                    <input type="text" class="searchHistoryText" placeholder="搜索记录">
                    <button class="searchHistoryBtn">
                        <i class="iconfont icon-sousuo icon"></i>
                    </button>
                </li>
                <li>
                    <a id="showUnSlavedHistory" th:href="@{/admin/approval?status=true}">仅展示未批准的请求</a>
                </li>
            </ul>
            
        </div>
        <div class="bookList" id="bookList" th:result="${result}" th:agreeResult="${agreeResult}" th:deleteResult="${deleteResult}">
            <table>
                <tr>
                    <th>记录id</th>
                    <th>用户id</th>
                    <th>图书id</th>
                    <th>图书名</th>
                    <th>作者名</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>借阅数量</th>
                    <th>借阅状态</th>
                    <th>用户id</th>
                    <th colspan="2">操作</th>
                </tr>
                <tr th:each="history:${pageInfo.list}">
                    <td>[[${history.hid}]]</td>
                    <td>[[${history.uid}]]</td>
                    <td>[[${history.bid}]]</td>
                    <td>[[${history.bookname}]]</td>
                    <td>[[${history.author}]]</td>
                    <td>[[${history.begintime}]]</td>
                    <td>[[${history.endtime}]]</td>
                    <td>[[${history.num}]]</td>
                    <td>[[${history.status==0 ? "未借阅":"已借阅"}]]</td>
                    <td><a class="agreeBorrow" th:uid="${history.uid}" th:bid="${history.bid}">批准</a></td>
                    <td><a  class="refuseBorrow" th:uid="${history.uid}" th:bid="${history.bid}">拒绝/已归还</a></td>
                </tr>
                
                
            </table>
        </div>

        <!-- 分页条导航条 -->
        <div class="page-nav-wrapper">
            <nav class="page-nav">
                <!-- 页面信息 -->
                <div class="page-info">
                    <span class="now-page">当前为第[[${pageInfo.pageNum}]]页</span>
                    <span class="page-number">共 [[${pageInfo.pages}]] 页</span>
                </div>
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" th:href="@{/admin/approval(status=${status},pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">Previous</a></li>
                    <!--                <li class="page-item"><a class="page-link" href="#">1</a></li>-->
                    <!--//导航页-->
                    <li th:each="nav:${pageInfo.navigatepageNums}" class="page-item">
                        <a th:href="'/library/admin/approval?status='+${status}+'&pageNum='+${nav}" th:text="${nav}" class="page-link"></a>
                    </li>
                    <li class="page-item"><a class="page-link" th:href="@{/admin/approval(status=${status},pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">Next</a></li>
                </ul>
            </nav>
        </div>

    </section>



    <script th:src="@{/script/sidebar.js}"></script>

    <script>
        var refuseBorrow = document.getElementsByClassName("refuseBorrow");
        for (let i=0;i<refuseBorrow.length;i++){
            refuseBorrow[i].addEventListener("click",()=>{
                 let uid = refuseBorrow[i].getAttribute("uid");
                 let bid = refuseBorrow[i].getAttribute("bid");
                if(confirm(`你确定要删除用户id为${uid},图书id为${bid}的借阅请求吗？`)){
                    location.href = `http://localhost:8080/library/admin/refuseBorrow?uid=${uid}&bid=${bid}`;
                }
                return false;
            });
        }


        var agreeBorrow = document.getElementsByClassName("agreeBorrow");
        for (let i=0;i<agreeBorrow.length;i++){
            agreeBorrow[i].addEventListener("click",()=>{
                let uid = agreeBorrow[i].getAttribute("uid");
                let bid = agreeBorrow[i].getAttribute("bid");
                if(confirm(`你确定要同意用户id为${uid},图书id为${bid}的借阅请求吗？`)){
                    location.href = `http://localhost:8080/library/admin/agreeBorrow?uid=${uid}&bid=${bid}`;
                }
                return false;
            });
        }
    </script>

    <script th:src="@{/script/approval.js}"></script>
</body>
</html>